<template>
  <div>
    <van-index-bar :sticky="false" :index-list="indexList" >
      <city-item
        v-for="(item, index) in cityList"
        :key="index"
        :item="item"
        :index="index"
        :hotCity="hotList"
      ></city-item>
    </van-index-bar>
  </div>
</template>

<script>
import { cityAPI, hotAPI } from '@/api'
import CityItem from './CityItem.vue'
// import wSortlist from 'wenlist'
export default {
  props: ['nowCity'],
  components: { CityItem },
  data () {
    return {
      // level: 1
      // 城市列表
      cityList: [],
      indexList: [],
      hotList: []
    }
  },
  async created () {
    // 城市列表
    const res = await cityAPI()
    console.log(res)
    this.cityList = res.data.body
    console.log(this.cityList)
    // 热门城市
    const res2 = await hotAPI()
    console.log(res2)
    // 声明一个新对象
    const newCity = {}
    newCity['当前城市'] = [this.nowCity]
    newCity['热门城市'] = res2.data.body
    console.log(newCity)
    const alphabet = Array.from(new Array(26), (ele, index) => {
      return String.fromCharCode(65 + index)
    })
    this.indexList = ['热', ...alphabet]
    // 声明空对象
    const city = {}
    for (let i = 0; i < alphabet.length; i++) {
      const arr = []
      for (let j = 0; j < this.cityList.length; j++) {
        if (this.cityList[j].short.slice(0, 1).toUpperCase() === alphabet[i]) {
          arr.push(this.cityList[j])
        }
      }
      if (arr.length === 0) {
        city[alphabet[i]] = ['暂无城市']
      } else {
        city[alphabet[i]] = arr
      }
    }
    // console.log(this.indexList)
    this.cityList = { ...newCity, ...city }
    console.log(this.cityList)
  }
}
</script>

<style>
</style>
